<template>
    <el-input 
        class="flex-input" 
        :type="data.type || 'text'" 
        :placeholder="data.placeholder" 
        v-model="form[data.paramKey]"
        :disabled="data.disabled"
    >
        <template #suffix v-if="data.suffix">
            {{ data.suffix() }}
        </template>
        <template #append v-if="data.append">
            <component :is="data.append()" />
        </template>
    </el-input>
</template>
<script setup>
    import { watch } from 'vue';
    const props = defineProps({
        form:{ type:Object },
        data:{ type:Object }
    });
    
</script>
<style lang="scss">
    .flex-input {
        height:var(--baseHeight);
        font-size:var(--baseFontSize);
        line-height:var(--baseHeight);
        .el-input__wrapper {
            padding:0 var(--sPadding);
            input {
                font-size:var(--baseFontSize);
                height:var(--baseHeight);
                line-height:var(--baseHeight);
            }
        }
    }
    .flex-input.el-textarea {
        height:calc( 2 * var(--baseHeight));
        line-height:calc( 2 * var(--baseHeight));
    }
</style>

